<template>
  <div>
    <div class="table-box">
      <div class="top-box">
        <div class="pro-radio">
          <a-button-group>
            <a-button
              style="width:100px;"
              :type="btnActive==1 ? 'primary' : ''"
              @click="setActive(1)"
            >监测项目</a-button>
            <a-button
              style="width:100px;"
              :type="btnActive==2 ? 'primary' : ''"
              @click="setActive(2)"
            >监护项目</a-button>
          </a-button-group>
        </div>
      </div>
      <div class="table-item">
        <span>我的项目</span>
        <a-select
          placeholder="请选择" 
          v-model='myProject'
          style="width: 600px;"
          @change="handleChange"
        >
          <a-select-option v-for="item in projectList" :key="item.pro_id">
              {{ item.pro_name }}
            </a-select-option>
        </a-select>
      </div>
      <div v-if='this.hasTodos'>

        <div v-if='this.isPro' class="table-item progress">
          <span>完成度</span>
          <a-progress style="width:70%" :percent="this.progress" />
        </div>
        <div v-if='this.isPro' class="table-item">
          <span>数据上传</span>
          <span>{{isDataUpload?'已完成':'未完成'}}</span>
        </div>
        <div v-if='this.isPro' class="table-item">
          <span>远程上传</span>
          <a-switch :disabled='this.isRemoteUpload' :checked='this.isRemoteUpload' @change="onCheck" />
        </div>
        <div v-if='this.isPro&&this.btnActive==2' class="table-item">
          <span>要销点状态</span>
          <span v-if='this.isGist'>已要点</span>
          <span v-if='this.isPinpoint'>已销点</span>
          <span class="remind" v-if='!this.isGist'>未要点</span>
          <span class="remind" v-if='!this.isPinpoint'>未销点</span>
        </div>
      </div>
      <div v-else class="block-tips">
        今日暂无待办事项
      </div>
    </div>
  </div>
</template>
<script>
// import { defineComponent } from '@/request/api'
import { getAllPro,getAllProjects,queryCompletenessByUser,remoteUpload } from "@/request/api";
import moment from "moment";
export default {
  data() {
    return {
      projectList:[],
      btnActive:1,
      checked:false,
      isPro:false,
      progress:0,
      isDataUpload:false,
      isRemoteUpload:false,
      isGist:false,
      isPinpoint:false,
      proId:null,
      myProject:'请选择',
      hasTodos:false
    };
  },
  created(){
    this.getAllProjects(1)
  },
  methods: {
    async getAllProjects(type) {
      this.projectList = []
      this.myProject = '请选择'
      let { data } = await getAllProjects({
        type
      });
      console.log(data);
      if (data.code === 200) {
        this.projectList = data.result;
        this.myProject = data.result[0].pro_name
        this.handleChange(data.result[0].pro_id)
      }
    },
    handleChange(value){
      console.log(value)
      this.proId = value
      this.progress = 0
      this.isDataUpload = false
      this.isRemoteUpload = false
      this.queryCompletenessByUser(value,this.btnActive)
      this.isPro = true
    },
   async queryCompletenessByUser(id,type){
     let that = this
     let date = moment().format('yyyy-MM-DD')
     console.log(date)
     let params = `?proId=${id}&proType=${type}&startDate=${date}&pageNum=1&pageSize=100`
     let {data} = await queryCompletenessByUser(params)
     console.log(data)
     if(data.code==200){
       if(data.result.records[0]){
         this.isDataUpload = data.result.records[0].isDataUpload
         this.isRemoteUpload = data.result.records[0].isRemoteUpload 
         this.checked = data.result.records[0].isRemoteUpload 
         this.progress = data.result.records[0].progress * 100
         this.isGist = data.result.records[0].isGist || false
         this.isPinpoint = data.result.records[0].isPinpoint || false
         this.hasTodos = true
       }else{
         this.hasTodos = false
       }
     }
   },
   onCheck(checked){
     console.log(checked)
      // this.isRemoteUpload = checked
      if(!this.isRemoteUpload){
          this.remoteUpload()
      }
   },
    setActive(val){
      this.btnActive = val;
      
      this.getAllProjects(val)
      this.isPro = false
    },
    //远程上传
    async remoteUpload(){
      let {data} = await remoteUpload({
        proId:this.proId,
        proType:this.btnActive,
        startDate:moment().format('yyyy-MM-DD'),
        isRemoteUpload:true
      })
      if(data.code==200){
        this.$message.success(data.result)
        this.queryCompletenessByUser(this.proId,this.btnActive)
      }else{
        this.$message.error(data.result)
      }
    }
  },
};
</script>
<style lang='less' scoped>
@import "~@/assets/css/base.less";
.table-box {
  padding: 0 20px;
  background: #fff;
  .top-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background: #fff;
    .pro-radio {
      width: 200px;
      height: 30px;
      // border: 1px solid #1890ff;
      border-radius: 4px;
    }
  }
}
.table-item{
  display: flex;
  align-items: center;
  span{
    width: 100px;
    height: 60px;
    line-height: 60px;
  }
  .remind{
    width: 90px;
    background-color: red;
    border-radius: 18px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    margin-bottom: 5px;
    margin-right: 10px;
}
}
.progress{
  display: flex;
  align-items: center;
}
.block-tips{
  padding: 25px;
  font-size: 16px;
  font-weight: 700;
}
</style>